<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="container">
        <div class="left_img">
            <img src="./img/t7.png" alt="">
        </div>
        <div class="right_img">
            <img src="./img/t8.png" alt="">
        </div>
        <div class="top">
            <img src="./img/t1.png" alt="">
        </div>
        <div class="btn_1">
            <img src="./img/t9.png" alt="">
        </div>
    </div>
    <script>
        let container = document.querySelector('.container');
        let btn_1 = document.querySelector('.btn_1');
        let left_img = document.querySelector('.left_img');
        let right_img = document.querySelector('.right_img');
        let top_1 = document.querySelector('.top');
        btn_1.addEventListener('click', function () {
            console.log('clicked');

            //背景图片
            container.style.animation = '';
            container.style.animation = 'enlargeBackground 1.5s forwards';
            setTimeout(() => {
                // 左边
                left_img.style.animation = '';
                left_img.style.animation = 'flyAway 1.5s forwards';
                // 右边
                right_img.style.animation = '';
                right_img.style.animation = 'flyAwayRight 1.5s forwards';
                // logo文字
                top_1.style.animation = '';
                top_1.style.animation = 'flyAwayUp 1.5s forwards';
            }, 100)
            // 写个定时器，2秒后跳转到tow.html页面
            setTimeout(() => {
                window.location.href = 'tow.html';
            }, 1500)
        });
    </script>
</body>

</html>